$(function () {
    var username = getCookie('username')
    if(username){
        $('.customNav').html(`
        欢迎你，<span style="font-size:14px;color:red;">${username}</span>      

        </a>&nbsp;&nbsp;&nbsp;
        <a title="退出" href="" class="logout">退出</a>
        `)

        $('.logout').click(function(){
            removeCookie('username')
            $('.customNav').html(`
            您还未登录，请
            <a title="登录" href="javascript:;">登录</a>

            <a title="注册" href="register.html">注册</a>
            `)
            gologin()
        })
        
    }

    gologin()

   


    // 获取商品id
    var reg = /id=(\d+)/;
    var arr = reg.exec(location.search)
    if (!arr) {
        layer.msg('非法访问！', {
            icon: 2,
            time: 1500
        }, function () {
            location.href = "paging.html";
        })
    }
    var id = arr[1];
    var id = arr[1];
    var laodindex = layer.load(0,{
        shade:[1,"#fff"]
    })
    // 发送ajax请求当前这个商品的详情
    $.get('php/detail.php', { id }, res => {
        var { meta: { status, msg }, data } = res;
        // console.log(data);
        if (status === 1) {
            $('.goodsname').text(data.name)
            $('.goodsprice').text(data.price)
            $('.goodsprices').text(parseInt(data.price * 0.8))
            $('.description').text(data.description)
            $('[name="introduce"]').html(data.introduce)
            $('.xiangqing')[0].src = data.img
            $('.big img')[0].src = data.img
            var imgs = data.manyImg.split('==========');
            var str = ''
            for (var i = 0; i < imgs.length; i++) {
                if (i === 0) {
                    str += `
                    <img class="active" src="${imgs[i]}">
                `
                } else {
                    str += `
                    <img src="${imgs[i]}">
                `
                }

            }
            $('.small').html(str)
            layer.close(laodindex)
            enlarge()
            // 加入购物车
            addcart(username, id)
        }
    }, 'json')
    var t = new Tab('tab')
    // console.log(t);

    t.init()
})



// 加入购物车
function addcart(username,id){
    $('.addcart').click(function(){
        var str = `
是否加入购物车
    `;
        var confirmIndex = layer.confirm(str, {
            btn: ['添加','再想想'] //按钮
          }, function(){
            if(!username){
                localStorage.setItem('url',location.href)
                location.href = "login.html";
                return false;
            }
            // 已经登录了
            // 实际项目中的购物车数据在数据库
            // 我们用本地存储来做
            /*
            [
                {
                    username:'',
                    goodsid:2,
                    number:5
                },
    
                {
                    username:'',
                    goodsid:2,
                    number:5
                }
            ]
            */
           // 先判断本地存储中是否有数据
           var data = localStorage.getItem('data')
            // console.log(data);
            if(!data){
                var arr = [];
            }else{
                var arr = JSON.parse(data)
            }
            // 本地存储中是否有当前这个商品
            // find方法 - 找数组中满足条件的第一个元素 - 返回这个元素
            // console.log(arr);
            var findResult = arr.find(item=>item.goodsid==id && item.username===username)
            // console.log(obj);
            if(!findResult){
                var obj = {
                    username,
                    goodsid:id,
                    number:1
                }
                arr.push(obj)
            }else{
                // 有这个数据
                findResult.number++
            }
            localStorage.setItem('data',JSON.stringify(arr))    
            layer.close(confirmIndex)
            layer.msg('添加成功！',{
                icon:1,
                time:1500
            })
          }, function(){
            $('[name="agree"]').prop('checked',false)
          });
        // 判断是否登录了
        // console.log(username);
      
    })
}
//登录
function gologin(){
    $('.customNav a:last').click(function(){
        // 点击登录
        // 跳转之前先设置一个本地存储将当前url存起来
        localStorage.setItem('url',location.href)
        // 需要跳转到登录页
        location.href = "login.html";
        // 登录成功后需要跳回来
    })
}
// 放大镜
function enlarge() {
    $('.small img').click(function () {
        $(this).addClass('active').siblings().removeClass('active')
        $('.middle>img').attr('src', $(this).attr("src"))
        $('.big>img').attr('src', $(this).attr("src"))
    })
    $('.middle').hover(function () {
        // 让遮罩和大盒子显示
        $('.mask').css('display', 'block')
        $('.big').css('display', 'block')

        $(this).mousemove(function (e) {
            var x = e.pageX;
            var y = e.pageY;

            // console.log(Math.ceil(parseFloat($('.middle').css('border-width'))));

            var left = x - $('.mask').width() / 2
            var top = y - $('.mask').height() / 2

            if (left <= $('.middle').offset().left + Math.ceil(parseFloat($('.middle').css('border-width')))) {
                left = $('.middle').offset().left + Math.ceil(parseFloat($('.middle').css('border-width')))
            }

            if (top <= $('.middle').offset().top + Math.ceil(parseFloat($('.middle').css('border-width')))) {
                top = $('.middle').offset().top + Math.ceil(parseFloat($('.middle').css('border-width')))
            }

            if (left >= $('.middle').offset().left + $('.middle').width() - $('.mask').width() + Math.ceil(parseFloat($('.middle').css('border-width')))) {
                left = $('.middle').offset().left + $('.middle').width() - $('.mask').width() + Math.ceil(parseFloat($('.middle').css('border-width')))
            }

            if (top >= $('.middle').offset().top + $('.middle').height() - $('.mask').height() + Math.ceil(parseFloat($('.middle').css('border-width')))) {
                top = $('.middle').offset().top + $('.middle').height() - $('.mask').height() + Math.ceil(parseFloat($('.middle').css('border-width')))
            }
            $('.mask').offset({ left, top })

            // 遮罩移动过的距离 / 中盒子的宽高 = 大图移动的距离 / 大图的大小
            var bigLeft = $('.mask').position().left / $('.middle').width() * $('.big>img').width()
            var bigTop = $('.mask').position().top / $('.middle').height() * $('.big>img').height()
            // console.log(bigLeft,bigTop);
            $('.big>img').css({
                left: -bigLeft + "px",
                top: -bigTop + "px"
            })
        })
    }, function () {
        $('.mask').css('display', 'none')
        $('.big').css('display', 'none')
    })
    
}
